const headerEl=document.querySelector('header')

const scrolltoTop=document.querySelector(".scrollToTop")
window.addEventListener('scroll',()=>{
	let height=headerEl.getBoundingClientRect().height
	if(window.pageYOffset-height>80) {
		if(!headerEl.classList.contains('sticky')){
			headerEl.classList.add("sticky")
		}
	}else {
		headerEl.classList.remove("sticky")
	}
	if(window.pageYOffset>2000) {
		scrolltoTop.style.display="block"
	}else {
		scrolltoTop.style.display="none"
	}
})

const glide =new Glide('.glide')

glide.on(['mount.after','run.after'],()=>{
	const captionsEl=document.querySelectorAll(".slide-caption")
	const caption=captionsEl[glide.index]
	anime({
		targets:caption.children,
		opacity:[0,1],
		duration:400,
		easing:'linear',
		delay:anime.stagger(400,{start:0}),
		translateY:[anime.stagger([40,10]),0]
	})
})
glide.on('run.before',()=>{
	document.querySelectorAll('.slide-caption>*').forEach(el=> {
		el.style.opacity=0
	})
})
glide.mount();

const isotope=new Isotope(".cases",{
	layoutMode:'fitRows',
	itemSlector:'.case-item'
})

const filterBtns=document.querySelector(".filter-btns");

filterBtns.addEventListener("click",e=> {
	let{target}=e;
	const filterOption=target.getAttribute("data-filter");
	if(filterOption) {
		//如果存在 去取消全部的css选中
		document.querySelectorAll('.filter-btn.active').forEach(btn=>btn.classList.remove('active'));
		target.classList.add("active");
		isotope.arrange({filter:filterOption})
	}
})

const staggeringOptioin={
	delay:300,
	display:"50px",
	duration:500,
	easing:'ease-in-out',
	origin:"bottom"
}
const datasectionEl=document.querySelector('.data-section')
ScrollReveal().reveal(".feature",{...staggeringOptioin,interval:350})
ScrollReveal().reveal(".service-item",{...staggeringOptioin,interval:350})
ScrollReveal().reveal(".data-section",{
	beforeReveal:()=>{
		anime({
			targets:".data-price .num",
			innerHTML:el=>{
		
				return [0,el.innerHTML]
			},
			duration:2000,
			round:1,
			easing:"easeInExpo"
		})
		datasectionEl.style.backgroundPosition = `center calc(50% - ${dataSectionEl.getBoundingClientRect()
		      .bottom / 5}px)`;
	}
})

//背景视差

window.addEventListener("scroll",()=> {
	const bottom=datasectionEl.getBoundingClientRect().bottom;
	const top=datasectionEl.getBoundingClientRect().top
  if (bottom >= 0 && top <= window.innerHeight) {
    datasectionEl.style.backgroundPosition = `center calc(50% - ${bottom /
      4}px)`;
  }
})
//流畅滚动

const scroll =new SmoothScroll("nav a[href*='#'],.scrollToTop a[href*='#']",{
	header:"header",
	offset:80,
})
const exploreBtnEl=document.querySelectorAll('.explore-btn');
exploreBtnEl.forEach(el=>{
	el.addEventListener('click',()=>{
		scroll.animateScroll(document.querySelector("#about-us"))
	})
})
